let name = document.querySelector('#name')
let psd = document.querySelector('#psd')
let repsd = document.querySelector('#repsd')
let name1 = document.querySelector('#name1')
let nickname = document.querySelector('#nickname')
let num = document.querySelector('#num')
let email = document.querySelector('#email')
let register = document.querySelector('#register')
let form = document.querySelector('form')


name.onblur = verifyName
name.onfocus = function () {
    this.innerHTML = ''
    this.style.borderColor = 'red'
}
psd.onblur = verifyPass
psd.onfocus = function () {
    this.innerHTML = ''
    this.style.borderColor = 'red'
}
repsd.onblur = verifyRepass
repsd.onfocus = function () {
    this.innerHTML = ''
    this.style.borderColor = 'red'
}
nickname.onblur = verifyNickname
nickname.onfocus = function () {
    this.innerHTML = ''
    this.style.borderColor = 'red'
}

num.onblur = verifyNum
num.onfocus = function () {
    this.innerHTML = ''
    this.style.borderColor = 'red'
}
email.onblur = verifyEml
email.onfocus = function () {
    this.innerHTML = ''
    this.style.borderColor = 'red'
}
name1.onblur = verifyRname
name1.onfocus = function () {
    this.innerHTML = ''
    this.style.borderColor = 'red'
}


//验证用户名不能为空
function verifyName() {
    let v = name.value
    let span = name.nextElementSibling

    if (!v || v.trim() === '') {
        span.innerHTML = '用户名不能为空'
        span.style.color = 'red'
        name.style.borderColor = 'red'
        name.style.color = 'red'
        return false
    }

    if (v1 === '') {
        span1.innerHTML = '真实姓名不能为空'
        span1.style.color = 'red'
        name1.style.borderColor = 'red'
        name1.style.color = 'red'
        return false
    }
    span.innerHTML = '输入正确'
    span.style.color = 'green'
    name.style.borderColor = 'green'
    return true

}
function verifyRname() {
    let v1 = name1.value
    let span = name1.nextElementSibling
    if (!v1 || v1
        
        .trim() === '') {
        span.innerHTML = '真实姓名不能为空'
        span.style.color = 'red'
        name1.style.borderColor = 'red'
        name1.style.color = 'red'
        return false
    }
    name1.style.borderColor = 'green'
    return true
}

//验证登录密码
function verifyPass() {
    let v = psd.value
    let span = psd.nextElementSibling
    if (!v || v.trim() === '') {
        span.innerHTML = '密码不能为空'
        span.style.color = 'red'
        psd.style.color = 'red'
        psd.style.borderColor = "red"
        return false
    }
    if (v.length > 16 || v.length < 6) {
        span.innerHTML = '密码长度为6-16'
        span.style.color = 'red'
        psd.style.borderColor = 'red'
        psd.style.color = 'red'
        return false
    }
    psd.style.borderColor = 'green'
    return true
}
//验证非空和密码一致
function verifyRepass() {
    let flag = verifyPass()
    let span = repsd.nextElementSibling
    let v = psd.value
    let v1 = repsd.value
    if (!flag) {
        span.innerHTML = '请输入正确的密码'
        span.style.color = 'red'
        repsd.style.borderColor = 'red'
        repsd.style.color = 'red'
        return false
    }
    if (v !== v1) {
        span.innerHTML = '两次密码不一致 长度为6-16'
        span.style.color = 'red'
        repsd.style.borderColor = 'red'
        repsd.style.color = 'red'
        return false
    }
    repsd.style.borderColor = 'green'
    return true
}

//验证昵称不能为空
function verifyNickname() {
    let span = nickname.nextElementSibling
    let v = nickname.value
    if (!v || v.trim() === '') {
        span.innerHTML = '昵称不能为空'
        span.style.color = 'red'
        nickname.style.borderColor = 'red'
        nickname.style.color = 'red'
        return false
    }
    let reg = /^\w+$/
    if (!reg || v.length < 4 || v.length > 20) {
        span.innerHTML = '昵称格式不正确'
        span.style.color = 'red'
        nickname.style.borderColor = 'red'
        nickname.style.color = 'red'
        return false
    }
    nickname.style.borderColor = 'green'
    return true
}
//验证手机号
function verifyNum() {
    let v = num.value
    let span = num.nextElementSibling
    let reg = /^1[356789]\d{9}$/
    if (!v || v.trim() === '') {
        span.innerHTML = '关联手机号码不能为空'
        span.style.color = 'red'
        num.style.borderColor = 'red'
        num.style.color = 'red'
        return false
    }
    if (!reg.test(v)) {
        span.innerHTML = '关联手机号格式不正确'
        span.style.color = 'red'
        num.style.borderColor = 'red'
        num.style.color = 'red'
        return false
    }

    num.style.borderColor = 'green'
    return true
}

//验证邮箱
function verifyEml() {
    let v = email.value
    let span = email.nextElementSibling
    let reg = /^[a-zA-Z0-9]+@[a-zA-Z0-9]{2,}(\.com|\.cn|\.com\.cn|\.org|\.net|\.edu)$/
    if (!reg.test(v)) {
        span.innerHTML = '邮箱格式不正确'
        span.style.color = 'red'
        email.style.borderColor = 'red'
        email.style.color = 'red'
        return false
    }
    email.style.borderColor = 'green'
    return true
}

form.onsubmit = (e) => {
    let flag = verifyName() & verifyRname() & verifyPass() & verifyRepass() & verifyNickname() & verifyNum() & verifyEml()
    return flag > 0
}

